<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>产品列表页面</title>
		<link rel="shortcut icon" href="img/favicon.ico">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: skyblue;
			}

			div {
				width: 400px;
				height: 40px;
				background-color: palevioletred;
				color: white;
				text-indent: 1em;
				line-height: 40px;
				font-weight: bold;
			}

			ul {
				width: 400px;
				background-color: white;
			}

			li {
				list-style: none;
				padding-left: 20px;
				padding-top: 10px;
				padding-bottom: 10px;
				border-bottom: 1px dashed black;
			}

			a {
				text-decoration: none;
				color: black;
			}

			span {
				width: 20px;
				height: 20px;
				background-color: black;
				color: white;
				display: inline-block;
				border-radius: 50%;
				text-align: center;
				line-height: 20px;
			}

			img {
				display: none;
			}

			li:hover img {
				display: block;
			}

			li:hover a {
				color: red;
			}

			li:hover span {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div>大家都喜欢买的美容品</div>
		<ul>
			<li><a href=""><span>1</span> 雅诗兰黛即时修护眼部精华霜15ml</a>
				<img src="./img/练习4素材：彩妆热卖产品列表/图片素材/icon-1.jpg" alt="">
			</li>
			<li><a href=""><span>2</span> 伊丽莎白雅顿显效复合活肤霜 75ml</a>
				<img src="./img/练习4素材：彩妆热卖产品列表/图片素材/icon-2.jpg" alt="">
			</li>
			<li><a href=""><span>3</span> OLAY玉兰油多效修护霜 50g</a>
				<img src="./img/练习4素材：彩妆热卖产品列表/图片素材/icon-3.jpg" alt="">
			</li>
			<li><a href=""><span>4</span> 巨型一号丝瓜水320ML</a>
				<img src="./img/练习4素材：彩妆热卖产品列表/图片素材/icon-4.jpg" alt="">
			</li>
			<li><a href=""><span>5</span> 倩碧保湿洁肤水2号 200ml</a>
				<img src="./img/练习4素材：彩妆热卖产品列表/图片素材/icon-4.jpg" alt="">
			</li>
			<li><a href=""><span>6</span> 比度克细肤淡印霜 30g</a>
				<img src="./img/练习4素材：彩妆热卖产品列表/图片素材/icon-4.jpg" alt="">
			</li>
			<li><a href=""><span>7</span> 兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a>
				<img src="./img/练习4素材：彩妆热卖产品列表/图片素材/icon-4.jpg" alt="">
			</li>
			<li><a href=""><span>8</span> SK-II护肤精华露 215ml</a>
				<img src="./img/练习4素材：彩妆热卖产品列表/图片素材/icon-4.jpg" alt="">
			</li>
			<li><a href=""><span>9</span> 欧莱雅青春密码活颜精华肌底液</a>
				<img src="./img/练习4素材：彩妆热卖产品列表/图片素材/icon-4.jpg" alt="">
			</li>
		</ul>
	</body>
</html>
